{% extends "template.html" %}
{% load staticfiles %}

{% block head %}
	<script type="text/javascript">
		$(document).ready(function () {
			$("input").keydown(function () {
				$("#status").text("");
			});
			$("#submit").click(function () {
				username = $("#username").val();
				email = $("#email").val();
				password = $("#password").val();
				password_confirm = $("#password_confirm").val();
				status = "";
				if (username == "") status = "用户名不得为空";
				else if (username.length > 20) status = "用户名不得超过20个字符";
				else if (email == "") status = "电子邮箱不得为空";
				else if (!/^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/.test(email)) status = "电子邮箱格式不合法";
				else if (password.length < 6 || password.length > 20) status = "密码的长度在6-20个字符之间";
				else if (password != password_confirm) status = "两次输入的密码不一致";
				if (status == "") {
					$.post("{% url 'user:registerAction' %}",
					       {
						       "username": username,
						       "email": email,
						       "password": password
					       }, function (data, textStatus) {
							data = eval(data);
							status = data["status"];
							if (status != "") $("#status").text(status);
							else location.href = "{% url 'index' %}";
						});
				}
				else {
					$("#status").text(status);
				}
				return false;
			});
		});
	</script>
{% endblock head %}

{% block body %}
	<div class="container">
		<form class="form-horizontal">
			<div class="form-group">
				<label for="username" class="col-md-2 control-label">用户名</label>

				<div class="col-md-10"><input id="username" class="form-control" type="text" placeholder="Username">
				</div>
			</div>
			<div class="form-group">
				<label for="email" class="col-md-2 control-label">电子邮箱</label>

				<div class="col-md-10"><input id="email" class="form-control" type="email" placeholder="Email"></div>
			</div>
			<div class="form-group">
				<label for="password" class="col-md-2 control-label">密码</label>

				<div class="col-md-10"><input id="password" class="form-control" type="password" placeholder="Password">
				</div>
			</div>
			<div class="form-group">
				<label for="password_confirm" class="col-md-2 control-label">确认密码</label>

				<div class="col-md-10"><input id="password_confirm" class="form-control" type="password"
				                              placeholder="Confirm Password"></div>
			</div>
			<div class="has-error">
				<label id="status" for="status" class="col-md-offset-2 col-md-10 control-label"
				       style="text-align:left; margin-bottom: 20px"></label>
			</div>
			<div class="form-group">
				<div class="col-md-offset-2 col-md-10">
					<button id="submit" class="btn btn-default">注册</button>
				</div>
			</div>
		</form>
	</div>
{% endblock body %}